<template>
  <view class="imageBox" v-show="imageUrl">
    <view class="closeImage flex a-item j-content" @click="removeImage">×</view>
    <image  class="image" :src="imageUrl"></image>
  </view>
</template>

<script>
export default {
  name: "photoImage",
  props:{
    imageUrl:{
      type:String,
      default:''
    },
    index:{
      type:Number,
      default: 0
    }
  },
  methods:{
    removeImage(){
      this.$emit('del',this.index)
    },
  }
}
</script>

<style lang="scss" scoped>
.imageBox{
  position: relative;
.closeImage{
  background: rgba(203,203,203,0.8);
  width: 35rpx;
  height: 35rpx;
  font-size: 30rpx;
  border-radius: 35rpx;
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  color: #ffffff;
}
}
.image{
  width: 200rpx;
  height: 200rpx;
}
</style>
